<template>
  <div class="evaluation-detail">
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
          <span class="title">评价详情</span>
        </div>
      </template>
      
      <div v-if="loading" class="loading">
        <el-skeleton :rows="6" animated />
      </div>
      
      <div v-else-if="analysisData" class="detail-content">
        <!-- 基本信息 -->
        <el-descriptions title="基本信息" :column="3" border>
          <el-descriptions-item label="订单号">
            {{ analysisData.order_rating?.order?.order_number || 'N/A' }}
          </el-descriptions-item>
          <el-descriptions-item label="司机ID">
            {{ analysisData.order_rating?.driver_id || 'N/A' }}
          </el-descriptions-item>
          <el-descriptions-item label="乘客ID">
            {{ analysisData.order_rating?.passenger_id || 'N/A' }}
          </el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate v-model="analysisData.order_rating.rating" disabled show-score />
          </el-descriptions-item>
          <el-descriptions-item label="评价时间">
            {{ formatDate(analysisData.order_rating?.rating_time) }}
          </el-descriptions-item>
          <el-descriptions-item label="分析时间">
            {{ formatDate(analysisData.analysis_time) }}
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 乘客评价 -->
        <el-card class="comment-card" style="margin-top: 20px;">
          <template #header>
            <span>乘客评价</span>
          </template>
          <div class="comment-content">
            {{ analysisData.order_rating?.comment || '暂无评价内容' }}
          </div>
        </el-card>
        
        <!-- 分析结果 -->
        <el-card class="analysis-card" style="margin-top: 20px;">
          <template #header>
            <span>分析结果</span>
          </template>
          
          <!-- 情感分析 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="analysis-item">
                <h4>情感分析</h4>
                <p><strong>情感标签:</strong> {{ analysisData.sentiment_label || 'N/A' }}</p>
                <p><strong>情感得分:</strong> {{ analysisData.sentiment_score || 'N/A' }}</p>
              </div>
            </el-col>
            
            <!-- 关键短语 -->
            <el-col :span="8">
              <div class="analysis-item">
                <h4>关键短语</h4>
                <div v-if="analysisData.key_phrases && analysisData.key_phrases.length > 0">
                  <el-tag 
                    v-for="phrase in analysisData.key_phrases" 
                    :key="phrase"
                    style="margin: 2px;"
                    type="info"
                  >
                    {{ phrase }}
                  </el-tag>
                </div>
                <p v-else>暂无关键短语</p>
              </div>
            </el-col>
            
            <!-- 改进领域 -->
            <el-col :span="8">
              <div class="analysis-item">
                <h4>改进领域</h4>
                <div v-if="analysisData.improvement_areas && analysisData.improvement_areas.length > 0">
                  <div 
                    v-for="area in analysisData.improvement_areas" 
                    :key="area.area"
                    class="improvement-area"
                  >
                    <el-tag 
                      :type="getPriorityType(area.priority)"
                      style="margin: 2px;"
                    >
                      {{ area.area }} ({{ area.priority }})
                    </el-tag>
                    <p class="area-description">{{ area.description }}</p>
                  </div>
                </div>
                <p v-else>暂无改进建议</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
      
      <div v-else class="no-data">
        <el-empty description="未找到分析记录" />
        <div style="margin-top: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
          <h4>调试信息</h4>
          <p><strong>路由参数:</strong> {{ route.params }}</p>
          <p><strong>分析ID:</strong> {{ route.params.id }}</p>
          <p><strong>加载状态:</strong> {{ loading }}</p>
          <p><strong>分析数据:</strong> {{ analysisData ? '已加载' : '未加载' }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { evaluationAPI } from '@/api/evaluation'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const analysisData = ref(null)

onMounted(async () => {
  await loadAnalysisDetail()
})

async function loadAnalysisDetail() {
  const analysisId = route.params.id
  if (!analysisId) {
    ElMessage.error('缺少分析记录ID')
    return
  }
  
  loading.value = true
  try {
    console.log('加载分析详情，ID:', analysisId)
    
    // 尝试从评价分析列表API获取数据
    const response = await evaluationAPI.getEvaluationAnalysisList({
      page: 1,
      page_size: 1000
    })
    
    console.log('评价分析列表API响应:', response)
    
    if (response.data && response.data.data) {
      const analysis = response.data.data.find(item => item.id == analysisId)
      console.log('找到的分析记录:', analysis)
      
      if (analysis) {
        analysisData.value = analysis
        console.log('设置分析数据:', analysisData.value)
      } else {
        console.log('未找到ID为', analysisId, '的分析记录')
        console.log('可用的分析记录:', response.data.data.map(item => ({ id: item.id, order_rating: item.order_rating?.id })))
        ElMessage.error('未找到指定的分析记录')
      }
    } else {
      ElMessage.error('无法获取分析记录数据')
    }
  } catch (error) {
    console.error('加载分析详情失败:', error)
    ElMessage.error('加载分析详情失败')
  } finally {
    loading.value = false
  }
}

function goBack() {
  router.go(-1)
}

function formatDate(dateString) {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

function getPriorityType(priority) {
  const typeMap = {
    '高': 'danger',
    '中': 'warning',
    '低': 'info'
  }
  return typeMap[priority] || 'info'
}
</script>

<style scoped>
.evaluation-detail {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.detail-card {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.loading {
  padding: 20px;
}

.detail-content {
  padding: 20px 0;
}

.comment-card {
  margin-bottom: 20px;
}

.comment-content {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
}

.analysis-card {
  margin-bottom: 20px;
}

.analysis-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  height: 100%;
}

.analysis-item h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
}

.analysis-item p {
  margin: 8px 0;
  color: #606266;
}

.improvement-area {
  margin-bottom: 12px;
}

.area-description {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #909399;
}

.no-data {
  padding: 40px;
  text-align: center;
}
</style> 